<template>
  <span
    :class="{
      right: flagitem.status === 'right',
      undo: flagitem.status === 'undo',
      error: flagitem.status === 'error'
    }"
    >{{ id }}: {{ flagitem.name }}</span
  >
</template>

<script>
export default {
  name: 'FlagItem',
  props: ['flagitem', 'id', 'flagone', 'flagtwo', 'flagths']
}
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>
